<template>
  <div class="item lazyScroll">
    <nav class="items animate__animated " :style="{'animation-delay':k*0.3+'s'}"  v-for="(v, k) in 30" :key="k">
      <img  v-lazy='"https://img.alicdn.com/imgextra/i4/1110596136/O1CN01QV5dzG1vCL05HDoDc_!!1110596136-0-alimamacc.jpg_200x200q90.jpg_.webp"'/>
    </nav>
  </div>
</template>

<script>
import 'animate.css';
export default {};
</script>

<style scoped>
.item {
  width: 500px;
  height: 100vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 200px;
  grid-auto-rows: 200px;
  grid-gap: 10px;
  align-content: start;
  margin: 0px auto;
  padding-right: 10px;
}
.items {
  overflow: hidden;
}
.items img {
  width: 100% !important;
  display: block;
}

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 6px;
  height: 0px;
  background-color: #f5f5f5;
}
/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
/*定义滑块
 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}
</style>